<template>
	<div>
		<el-table
			:data="tableData"
			style="width:90%;"  
			border
			:header-cell-class-name="tableheaderClassName"
			:row-class-name="tableRowClassName">
				<el-table-column 
				prop="date1"
				label="日期">
				</el-table-column>
				<el-table-column
				prop="name"
				label="姓名">
				</el-table-column>
				<el-table-column
				prop="address"
				label="地址">
				</el-table-column>
				<el-table-column
					fixed="right"
					label="操作"
					header-align="center">
					<template slot-scope="scope">
					<el-button  type="text" size="small">
						<span @click="handleClick(scope.row)">启用</span>
						<span 
						style="color:#212121">证书</span>
					</el-button>
					<el-button type="text" size="small">编辑</el-button>
					<el-button type="text" size="small">删除</el-button>
					<el-button type="text" size="small" @click="dialogFormVisible=true">处理数据</el-button>
					</template>
			 </el-table-column>
		</el-table>
	</div>
</template>
<script>
export default{
	name:'table1',
	data(){
		return{
			tableData: [{
				date1: '2016-05-02',
				name: '王小虎',
				address: '上海市普陀区金沙江路 1518 弄'
			}, {
				date1: '2016-05-04',
				name: '王小虎',
				address: '上海市普陀区金沙江路 1517 弄'
			}, {
				date1: '2016-05-04',
				name: '王小虎',
				address: '上海市普陀区金沙江路 1517 弄'
			}, {
				date1: '2016-05-04',
				name: '王小虎',
				address: '上海市普陀区金沙江路 1517 弄'
			}]
		}
	},
	methods:{
		tableRowClassName({rowIndex}) {
			// console.log(rowIndex);
			if (rowIndex % 2==0) {
				console.log(rowIndex);
				return 'success-row';
			} else if (rowIndex % 2 !==0) {
				return 'warning-row';
			}
			return '';
		},
		tableheaderClassName() {
			return "table-head-th";
		},
	}
}
</script>
<style>
	/*.el-table .table-head-th{
		background-color:#999999;
		font-size: small;
		color: #000;
	}
		.el-table .warning-row {
	background: #EBEEF5;
	}

	.el-table .success-row {
	background: #fff;
	}*/

</style>